<template>
	<view class="content">
		<u-modal :show="show" title="退出登录" :content='content' showCancelButton="true" @cancel="show=false"
			@confirm="handleOutConfirm"></u-modal>
		<!-- 顶部管理员信息 -->
		<view class="top">
			<view class="center">
				<!-- 左边图标 -->
				<view class="t_left">
					<!-- <u-icon name="account-fill" color="#fff" size="45"></u-icon> -->
					<image class="t_avatar" :src="user.avatar" mode=""></image>
				</view>
				<!-- 右边信息 -->
				<view class="t_right">
					<text class="nickName">{{user.nickName}}</text>
					<view class="t_tag" v-if="user.roleId==0">管理员</view>
					<view class="t_tag1" v-if="user.roleId==-1">超级管理员</view>
				</view>

			</view>
			<!-- 定位的一个退出 -->
			<view class="logout" @click="handleLogOut">
				<image class="out_img" src="../../static/admin/logout.png" mode=""></image>
			</view>


		</view>
		<view class="nav">
			<view class="nav_item" @click="handleManageLab">
				<!-- 数量 -->
				<view class="item_count">
					{{baseCount.labCount}}
				</view>
				<!-- 文字 -->
				<view class="item_text">实验室</view>
			</view>
			<view class="nav_item" @click="handleResManage">
				<!-- 数量 -->
				<view class="item_count">
					{{baseCount.resCount}}
				</view>
				<!-- 文字 -->
				<view class="item_text">预约申请</view>
			</view>
			<view class="nav_item" @click="handleUserManage">
				<!-- 数量 -->
				<view class="item_count">{{baseCount.userCount}}</view>
				<!-- 文字 -->
				<view class="item_text">用户</view>
			</view>
			<view class="nav_item" @click="handleTrendsManage">
				<!-- 数量 -->
				<view class="item_count">{{baseCount.trendsCount}}</view>
				<!-- 文字 -->
				<view class="item_text">动态</view>
			</view>

		</view>
		<!-- 主体功能 -->
		<view class="main">
			<!-- 顶部提示 -->
			<view class="main_tip">
				<!-- 左边图标 -->
				<view class="tip_icon">
					<image class="tip_img" src="../../static/admin/point.png" mode=""></image>
				</view>
				<!-- 右边文字 -->
				<view class="tip_text">主体功能</view>

			</view>
			<!-- 底部功能入口 -->
			<view class="control">
				<view class="c_item">
					<view class="c_tip">
						<!--图片 -->
						<view class="c_icon" @click="handleResManage">
							<image class="c_img" src="../../static/admin/c_yuyue.png" mode=""></image>
						</view>
						<!-- 文字 -->
						<view class="c_text">预约管理</view>
					</view>

				</view>
				<view class="c_item" @click="handleUserManage">
					<view class="c_tip">
						<!--图片 -->
						<view class="c_icon">
							<image class="c_img" src="../../static/admin/c_user.png" mode=""></image>
						</view>
						<!-- 文字 -->
						<view class="c_text">用户管理</view>
					</view>

				</view>
				<view class="c_item" @click="handleManageLab">
					<view class="c_tip">
						<!--图片 -->
						<view class="c_icon">
							<image class="c_img" src="../../static/admin/c_lab.png" mode=""></image>
						</view>
						<!-- 文字 -->
						<view class="c_text">实验室管理</view>
					</view>

				</view>

			</view>
		</view>
		<!-- 小功能列表 -->
		<view class="control1">
			<view class="c1_item">
				<u-cell size="large" title="发布实验室" url="/subpages/admin_lab_send/admin_lab_send" isLink>
					<!-- <u-icon slot="icon" size="28" name="account" color="black"></u-icon> -->
					<image class="c1_img1" slot="icon" src="../../static/admin/lab_send.png" mode=""></image>
				</u-cell>
			</view>
			<view class="c1_item">
				<u-cell size="large" title="实验室类别管理" url="/subpages/admin_lab_type/admin_lab_type" isLink>
					<image class="c1_img3" slot="icon" src="../../static/admin/lab_kind.png" mode=""></image>
				</u-cell>
			</view>
			<view class="c1_item">
				<u-cell size="large" title="发布动态" url="/subpages/admin_trends_send/admin_trends_send" isLink>
					<image class="c1_img2" slot="icon" src="../../static/admin/trends_send.png" mode=""></image>
				</u-cell>
			</view>
			<view class="c1_item">
				<u-cell size="large" title="实验室动态管理" url="/subpages/admin_trends/admin_trends" isLink>
					<image class="c1_img4" slot="icon" src="../../static/admin/c_trends.png" mode=""></image>
				</u-cell>
			</view>
			<view class="c1_item">
				<u-cell size="large" title="基础用户数据管理" url="/subpages/admin_data_import/admin_data_import" isLink>
					<image class="c1_img4" slot="icon" src="../../static/admin/excel.png" mode=""></image>
				</u-cell>
			</view>

		</view>
		<!-- 另外两个小功能 -->
		<view class="control2">
			<view class="c1_item">
				<u-cell size="large" title="修改密码" url="/subpages/update_password/update_password" isLink>
					<image class="c1_img2" slot="icon" src="../../static/admin/change_psd.png" mode=""></image>
				</u-cell>
			</view>
			<view class="c1_item">
				<u-cell size="large" title="个人信息管理" url="/subpages/update_user_Info/update_user_Info" isLink>
					<image class="c1_img4" slot="icon" src="../../static/admin/user_info.png" mode=""></image>
				</u-cell>
			</view>
		</view>
		<!-- 底部退出登录按钮 -->
		<view class="logout_btn">
			<u-button type="primary" text="退出登录" @click="handleLogOut"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		removeToken
	} from '../../utils/auth.js'
	import {
		getBaseCount
	} from '../../api/base.js'
	export default {
		data() {
			return {
				show: false,
				content: "此操作将退出登录，是否继续？",
				baseCount: {},
				roleId: "",
				user: {}
			};
		},
		onLoad() {
			let user = uni.getStorageSync('user')
			this.user = user
			console.log(user);
			this.roleId = user.roleId
			uni.hideHomeButton()
			this.handleGetCount()
		},
		onShow() {
			let user = uni.getStorageSync('user')
			this.user = user
			this.roleId = user.roleId
			this.handleGetCount()
		},
		methods: {
			// 跳转到实验室动态管理
			handleTrendsManage() {
				uni.navigateTo({
					url: "/subpages/admin_trends/admin_trends"
				})
			},
			// 跳转到预约管理
			handleResManage() {
				uni.navigateTo({
					url: "/subpages/admin_res_manage/admin_res_manage"
				})
			},
			// 跳转到用户管理
			handleUserManage() {
				uni.navigateTo({
					url: "/subpages/admin_user/admin_user"
				})
			},
			// 跳转到实验室管理页面
			handleManageLab() {
				uni.navigateTo({
					url: "/subpages/admin_lab_manage/admin_lab_manage"
				})
			},
			// 退出登录确定按钮点击
			handleOutConfirm() {
				this.show = false
				// 直接清除本地所有缓存
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/subpages/admin-login/admin-login"
				})
			},
			// 退出登录
			handleLogOut() {
				this.show = true
			},
			// 获取各个数量
			handleGetCount() {
				getBaseCount().then(res => {
					this.baseCount = res.data
					console.log(this.baseCount);
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background-color: #f1f1f1;
		padding-bottom: 85upx;

		.top {
			position: relative;
			width: 100%;
			height: 130upx;
			background-color: #5064eb;

			.logout {
				position: absolute;
				top: 5upx;
				right: 20upx;
				width: 50upx;
				height: 55upx;
				// background-color: pink;

				.out_img {
					width: 100%;
					height: 100%;
				}
			}

			.center {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.t_left {
					width: 100upx;
					height: 100upx;
					// background-color: pink;
					display: flex;
					justify-content: center;
					align-items: center;
					border-top: 10upx;
					margin-left: 30upx;
					margin-right: 20upx;

					.t_avatar {
						width: 100%;
						height: 100%;
						border-radius: 10upx;
					}
				}

				.t_right {
					flex: 1;
					height: 100upx;
					// background-color: pink;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.nickName {
						font-size: 35upx;
						color: #fff;
					}

					.t_tag {
						font-size: 20upx;
						background-color: gold;
						color: #fff;
						width: 80upx;
						height: 30upx;
						text-align: center;
						border-radius: 5upx;
						margin-left: 10upx;
					}

					.t_tag1 {
						font-size: 20upx;
						background-color: #e43d30;
						color: #fff;
						width: 120upx;
						height: 30upx;
						text-align: center;
						border-radius: 5upx;
						margin-left: 10upx;

					}
				}
			}

		}

		.nav {
			width: 100%;
			height: 155upx;
			background-color: pink;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.nav_item {
				overflow: hidden;
				box-sizing: border-box;
				background-color: #fff;
				width: 25%;
				height: 100%;
				border: 1px solid #f1f1f1;
				// display: flex;
				// flex-direction: row;
				// justify-content: center;
				// flex-wrap: wrap;
				// align-items: center;

				&:first-child {
					border-left: 1px solid #fff;
				}

				&:last-child {
					border-right: 1px solid #fff;
				}

				.item_count {
					width: 100%;
					font-size: 30upx;
					text-align: center;
					line-height: 30upx;
					margin-top: 35upx;
					margin-bottom: 20upx;
				}

				.item_text {
					width: 100%;
					font-size: 30upx;
					text-align: center;
					line-height: 30upx;
				}
			}
		}

		.main {
			width: 100%;
			height: 285upx;
			background-color: #fff;
			margin-top: 20upx;

			.main_tip {
				width: 100%;
				height: 110upx;
				// background-color: pink;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 1px solid #f1f1f1;

				.tip_icon {
					width: 50upx;
					height: 50upx;

					.tip_img {
						width: 100%;
						height: 100%;
					}
				}

				.tip_text {
					font-size: 35upx;
					color: #656666;
				}

			}

			.control {
				width: 100%;
				height: 175upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.c_item {
					width: 33.3%;
					height: 100%;
					border: 1px solid #f1f1f1;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					&:first-child {
						border-left: 1px solid #fff;
					}

					&:last-child {
						border-right: 1px solid #fff;
					}

					.c_tip {
						.c_icon {
							width: 100%;
							display: flex;
							flex-direction: row;
							justify-content: center;

							.c_img {
								width: 75upx;
								height: 75upx;
							}
						}

						.c_text {
							width: 100%;
							font-size: 30upx;
							text-align: center;
						}
					}


				}
			}
		}

		.control1 {
			width: 100%;
			height: 597upx;
			background-color: #fff;
			margin-top: 30upx;

			.c1_item {
				width: 100%;
				height: 100upx;
				margin-bottom: 20upx;

				.c1_img1 {
					width: 65upx;
					height: 65upx;
				}

				.c1_img2 {
					width: 65upx;
					height: 65upx;
					// margin-right: 20upx;
				}

				.c1_img3 {
					width: 69upx;
					height: 69upx;
					// margin-right: 14upx;
				}

				.c1_img4 {
					width: 63upx;
					height: 63upx;
					// margin-right: 14upx;
				}
			}
		}

		.control2 {
			width: 100%;
			height: 239upx;
			background-color: #fff;
			margin-top: 30upx;

			.c1_item {
				width: 100%;
				height: 100upx;
				margin-bottom: 20upx;

				.c1_img1 {
					width: 65upx;
					height: 65upx;
				}

				.c1_img2 {
					width: 65upx;
					height: 65upx;
					// margin-right: 20upx;
				}

				.c1_img3 {
					width: 69upx;
					height: 69upx;
					// margin-right: 14upx;
				}

				.c1_img4 {
					width: 63upx;
					height: 63upx;
					// margin-right: 14upx;
				}
			}
		}

		.logout_btn {
			box-sizing: border-box;
			width: 100%;
			padding: 20upx;
			height: 50upx;
		}

	}
</style>